<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item">
        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
          item
        }}</span>
        <a v-else @click.prevent="handleLink(item)">{{ item }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import pathToRegexp from "path-to-regexp";

export default {
  data() {
    return {
      levelList: null,
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },
  created() {
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      console.log("this.$route.path", this.$route.path);
      let { path } = this.$route;
      let paths = path.split("/");
      let type = paths[1];
      //资产中心
      if (type.includes("asset")) {
        let levelItem = path.replace("/asset", "资产中心").replace("/store", "/存储资产").replace("/api", "/API资产");
        this.levelList = levelItem.split("/");
        return;
      } else if (type.includes("govern")) {
        //风险中心
        let levelItem = path
          .replace("/govern", "风险中心")
          .replace("/store", "/存储风险")
          .replace("/audit-api", "/自查及审计")
          .replace("/api", "/传输风险");
        this.levelList = levelItem.split("/");
        return;
      } else if (type.includes("task")) {
        //工单中心
        let levelItem = path
          .replace("/task", "工单中心")
          .replace("/pending", "/待认领")
          .replace("/doing", "/进行中")
          .replace("/done", "/已完成")
          .replace("/notify", "/我的知会工单")
          .replace("/approval", "/我的审批工单");
        this.levelList = levelItem.split("/");
        return;
      }
      let matched = this.$route.matched.filter((item) => item.meta && item.meta.title);
      console.log("matched", matched);

      this.levelList = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false);
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route;
      var toPath = pathToRegexp.compile(path);
      return toPath(params);
    },
    menuRouter(data, name) {
      // let selMenu = data.find((item) => item.name?.toLowerCase() === name);
      let selMenu = null;
      for (let i = 0; i < data.length; i++) {
        let item = data[i];
        if (item.name?.toLowerCase() == name) {
          selMenu = item;
          break; //跳出循环
        }
        //多层级的时候需要递归查
        item?.children?.length > 0 && this.menuRouter(item.children, name);
      }
      selMenu && this.$router.push(selMenu.url);
    },
    handleLink(name) {
      let primaryRoute = this.$route.path.split("/")[1];
      console.log("$store.state.menu", this.$store.state.menu);
      let { firstLevelMenu, asideMenu } = this.$store.state.menu;
      this.menuRouter(firstLevelMenu, name);
      this.menuRouter(asideMenu[`/${primaryRoute}`], name);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 40px;
  margin-left: 20px;
  height: 100%;

  .no-redirect {
    // color: #97a8be;
    color: $color;
    cursor: text;
  }
}
a {
  color: $fourColor;
}
</style>
